<template>
  <div @click="jumpLeaderboardDetails(rankingItem.id)">
    <div class="left">
      <h1>{{ rankingItem.name }}</h1>
      <div v-if="show">
        <div class="pics" v-if="playlist.tracks">
          <img :src="playlist.tracks[0].al.picUrl" alt="" />
          <img :src="playlist.tracks[1].al.picUrl" alt="" />
          <img :src="playlist.tracks[2].al.picUrl" alt="" />
        </div>
      </div>
      <div v-else class="loading">
        <img class="auto-img" src="../assets/loading.gif" alt="">
      </div>
    </div>
    <ul class="right" v-if="playlist">
      <li v-for="(track, index) in tracksSlice" :key="track.id">
        <span
          >{{ index + 1 }}.{{ track.al.name
          }}<span v-for="ar in track.ar" :key="ar.id">{{ ar.name }}</span></span
        >
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    rankingItem: Object,
  },
  data() {
    return {
      playlist: {},
      tracksSlice: [],
      show: false,
    };
  },
  methods: {
    jumpLeaderboardDetails(id) {
      if (id) {
        this.$router.push({
          path: "/leaderboarddetails",
          query: {
            id,
          },
        });
      }
    },
  },
  watch: {
    playlist() {
      if (this.playlist) {
        this.tracksSlice = this.playlist.tracks.slice(0, 3);
        this.$emit("tracks-array", this.playlist.tracks);
      }
    },
  },
  created() {
    this.show = false;
    this.axios
      .get(
        "https://apis.netstart.cn/music/playlist/detail?id=" +
          this.rankingItem.id
      )
      .then((res) => {
        this.playlist = res.data.playlist;
        window.setTimeout(() => {
          this.show = true;
        })
      },2000);
  },
};
</script>

<style lang="less" scoped>
.auto-img {
  display: block;
  width: 100%;
  height: auto;
}
.pics {
  position: relative;
  img {
    border-radius: 10px;
    display: block;
    width: 48px;
    position: absolute;
    top: 10px;
    left: 0;
    opacity: 1;
    z-index: 2;
    &:nth-of-type(2) {
      opacity: 0.4;
      transform: scale(0.8) translateX(10px);
      transform-origin: right bottom;
      z-index: 1;
    }
    &:nth-of-type(3) {
      opacity: 0.2;
      transform: scale(0.6) translateX(20px);
      transform-origin: right bottom;
      z-index: 0;
    }
  }
}
.loading{
  width: 50px;
}
.left {
  width: 25vw;
  h1 {
    color: #e82e77;
    font-weight: bolder;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
.right {
  width: 50vw;
  margin-left: 5vw;
  margin-top: 3vw;

  li {
    font-size: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 1vh;

    & > span {
      font-weight: bold;
      span {
        font-weight: normal;
        color: #968b8f;
        &::before {
          content: "/";
        }
        &:first-of-type {
          &::before {
            content: " - ";
          }
        }
      }
    }
  }
}
</style>